<template>
  <header class="sou-header">
    <div class="sou-a1">
      <div class="sou-a2">
        <van-cell is-link @click="showPopup" class="sousuo-lan">
          <div class="sou-a21">
            <i></i>
            <span>耐克</span>
          </div>
        </van-cell>
        <van-popup v-model="show" position="top" closeable :style="{ height: '100%' }">
          <form action="/">
            <van-search
              v-model="value"
              show-action
              placeholder="请输入搜索内容"
              @search="onSearch"
              @cancel="onCancel"
            />
          </form>
        </van-popup>
        <div class="sou-a22">
          <router-link exact to="/Login" active-class="active" tag="li">
            <a href="#">登录/注册</a>
          </router-link>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import Vue from "vue";
import { Popup, Search } from "vant";
Vue.use(Popup);
Vue.use(Search);

export default {
  data() {
    return {
      show: false,
      value: "",
    };
  },
  mounted() {},
  methods: {
    showPopup() {
      this.show = true;
    },
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    },
  },
};
</script>

<style lang="scss" scoped>
    .sou-header{
        position: sticky;
        top: 0px;
        z-index: 100;
        width: 100%;
        height: 45px;
    }
    .sou-a1{
        width: 100%;
    }
    .sou-a2{
        position: relative;
        line-height: 45px;
        height: 45px;
        text-align: center;
        background-color: #fff;
        overflow: hidden;
        -webkit-transition: height 0.4s;
        -moz-transition: height 0.4s;
        transition: height 0.4s;
        border-bottom: 1px solid #f0f0f0;
    }
    .sou-a21{
        margin: 8px 97px 0 10px;
        line-height: 27px;
        height: 25px;
        color: #727273;
        cursor: text;
        font-size: 13px;
        background-color: #fff;
        text-align: left;
        border: 2px solid #f00;
        border-radius: 30px;
        width: 280px;
        i{
            display: inline-block;
            vertical-align: top;
            width: 13px;
            height: 30px;
            width: 15px;
            margin: -2px 8px 0 0.146667rem;
            background: url() no-repeat;
            background-position: 0 center;
            background-size: contain;
            margin-left: 5px;
        }
    }
    .sou-a22{
        margin-top: -15px;
        right: 0;
        width: 97px;
        a{
            margin-left: auto;
            vertical-align: middle;
            position: absolute;
            right: 15px;
            top: 50%;
            margin-top: -12px;
            color: #e31436;
            font-size: 12px;
            border: red 1px solid;
            padding: 4px;
            line-height: 15px;
            width: auto;
            height: 25px;
            box-sizing: border-box
            
        }
    }
    .sousuo-lan{
        width: 400px;
        position: absolute;
        bottom: -5px;
    }
    .van-cell__right-icon{
        display: none;
    }
</style>
